/*
 * Created by CZJ on July 18, 2019.
 * @description Item组件
 */
import React, { memo, useState } from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import _ from 'lodash';
import { adapt } from '~/utils/ScreenAdapter';
import { DefaultStyles } from '../../styles/GlobalStyles';

/*
 * Item组件
 * @param title { String } Item左侧标题
 * @param placeholder { String } Item右侧输入框占位文字
 * @param placeholderColor { String } 占位文字颜色
 * @param type { String } 组件类型
 * @param onChange { function } 输入的回调函数
 */

const YiItem = memo(props => {
  const { type = 'input', title, onPress, style, bottomComponent } = props;
  let Tag = type === 'button' ? TouchableOpacity : View;
  let [toggle, setToggle] = useState(false);
  return (
    <View>
      <Tag
        style={{ ...styles.container, ...(style ? style : {}) }}
        onPress={onPress}
      >
        <Text style={styles.titleStyle}>{title}</Text>
        {Items[type] && Items[type](props)}
        {type === 'dropDown' && dropDownItem(props, toggle, setToggle)}
      </Tag>
      {bottomComponent && !toggle && bottomComponent()}
    </View>
  );
});

function selectItem(props) {
  const {
    placeholder,
    onPress,
    openType,
    value = '',
    ellipsis = false,
    disabled = false,
  } = props;
  let text =
    ellipsis && !_.isNull(value) && value.length > 16
      ? `${value.slice(0, 16)}...`
      : value || placeholder;
  let direction =
    ellipsis || (!_.isNull(value) && value.length < 18)
      ? { textAlign: 'right' }
      : {};
  return (
    <TouchableOpacity onPress={() => onPress(openType)} disabled={disabled}>
      <View style={styles.itemRight}>
        <Text
          style={[
            { fontWeight: 'bold' },
            value
              ? value.length > 16
                ? {
                    ...direction,
                    color: 'rgba(0, 0, 0, .84)',
                    width: '85%',
                    lineHeight: adapt(22),
                    paddingLeft: adapt(12),
                  }
                : {
                    color: 'rgba(0, 0, 0, .84)',
                  }
              : styles.placeholder,
          ]}
        >
          {text}
        </Text>
        <View>
          <Image
            source={require('../../assets/icon/icon_right.png')}
            style={styles.arrowIcon}
          />
        </View>
      </View>
    </TouchableOpacity>
  );
}

function inputItem(props) {
  const {
    placeholder,
    placeholderColor = 'rgba(0, 0, 0, .16)',
    onChange,
    param,
    value,
    keyboardType = 'default',
    textInputStyle = {color: 'rgba(0, 0, 0, .84)'},
    maxLength = 99,
  } = props;
  return (
    <TextInput
      // eslint-disable-next-line react-native/no-inline-styles
      style={{
        ...(value ? DefaultStyles.Medium : DefaultStyles.Regular),
        textAlign: 'right',
        ...textInputStyle,
        flex: 1,
        marginLeft: adapt(20),
      }}
      maxLength={maxLength}
      keyboardType={keyboardType}
      value={value}
      onChangeText={text => onChange({ [param]: text })}
      placeholder={placeholder}
      underlineColorAndroid="transparent"
      placeholderTextColor={placeholderColor}
    />
  );
}

function buttonItem() {
  return (
    <Image
      source={require('../../assets/icon/icon_right.png')}
      style={styles.arrowIcon}
    />
  );
}
function showItem(props) {
  let { value = '' } = props;
  return (
    <Text style={{ color: 'rgba(0, 0, 0, .84)', fontWeight: '500' }}>
      {!_.isNull(value) && value.length > 16
        ? `${value.slice(0, 16)}...`
        : value}
    </Text>
  );
}

function dropDownItem(props, toggle, setToggle) {
  return (
    <TouchableOpacity onPress={() => setToggle(!toggle)}>
      <Image
        source={
          toggle
            ? require('../../assets/icon/icon_up.png')
            : require('../../assets/icon/icon_down.png')
        }
        style={styles.arrowIcon}
      />
    </TouchableOpacity>
  );
}

function remarkItem(props) {}

const Items = {
  select: selectItem,
  input: inputItem,
  button: buttonItem,
  show: showItem,
  remark: remarkItem,
};

export default YiItem;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    minHeight: adapt(56),
    borderBottomColor: 'rgba(0, 0, 0, .04)',
    borderBottomWidth: 1,
    paddingHorizontal: adapt(16),
  },
  titleStyle: {
    fontSize: adapt(16),
    color: DefaultStyles.Black84,
    ...DefaultStyles.Regular,
  },
  placeholder: {
    color: 'rgba(0, 0, 0, .16)',
    fontSize: adapt(14),
    ...DefaultStyles.Regular,
  },
  itemRight: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  arrowIcon: {
    height: adapt(16),
    width: adapt(16),
  },
});
